import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Router, Switch, Route} from 'react-router-dom';
import {createBrowserHistory as createHistory} from 'history';
import LoadingLine from '@shared/components/load-line';

const history = createHistory();

const routeList = [
  {
    path: '/test/side-menu',
    exact: true,
    component: React.lazy(() => import(/* webpackChunkName: "MenuTest" */ './routes/test/MenuTest')),
  },
  {
    path: '/test/hook',
    exact: true,
    component: React.lazy(() => import(/* webpackChunkName: "HookTest" */ './routes/test/HookTest')),
  },
  {
    path: '/editor/docs',
    exact: true,
    component: React.lazy(() => import(/* webpackChunkName: "docs" */ './routes/editor/Docs')),
  },
  {
    path: '/editor',
    exact: true,
    component: React.lazy(() => import(/* webpackChunkName: "editor" */ './routes/editor/Editor')),
  },
  {
    path: '/login',
    exact: true,
    component: React.lazy(() => import(/* webpackChunkName: "login" */ './routes/oauth/OAuthLogin')),
  },
  {
    path: '/passport/oauth/callback',
    exact: true,
    component: React.lazy(() => import(/* webpackChunkName: "oauth-login-callback" */ './routes/oauth/OAuthLoginCallback')),
  },
  {
    path: '/',
    exact: true,
    component: React.lazy(() => import(/* webpackChunkName: "app" */ './App')),
  },
];
const RouterConfig = (props: any) => {
  return (
    <Router history={history}>
      <Switch>
        {routeList.map((route) => (
          <Route key={route.path} path={route.path} exace={route.exact} component={route.component} />
        ))}
      </Switch>
    </Router>
  );
};

ReactDOM.render(
  <React.Suspense fallback={<LoadingLine loading={true} />}>
    <RouterConfig />
  </React.Suspense>,
  document.getElementById('root')
);
